<template>
  <el-dialog
    :title="title == 'add' ? '添加用户' : '编辑用户'"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="30%"
    top="15%"
    @close="handleClose"
  >
    <div class="dialog-content">
      <el-form
        label-width="64px"
        :model="formData"
        label-position="left"
        ref="form"
      >
        <el-form-item
          prop="username"
          label="用户名"
          :rules="[
            {
              required: true,
              message: '请输入用户名',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            :disabled="title == 'edit'"
            placeholder="请输入用户名"
            v-model="formData.username"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="password"
          label="密码"
          :rules="[
            {
              required: true,
              message: '请输入密码',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            placeholder="请输入密码"
            show-password
            v-model="formData.password"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="small">取 消</el-button>
      <el-button type="primary" @click="changeSure" size="small"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import { userEditlData, userAddlData } from "@/api/api";
export default {
  props: {
    userDialog: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "add",
    },
    form: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      dialogVisible: false,
      formData: {
        id: "",
        username: "",
        password: "",
      },
    };
  },
  watch: {
    userDialog() {
      this.dialogVisible = this.userDialog;
    },
    form() {
      this.formData = this.form;
    },
  },
  methods: {
    handleClose() {
      this.$emit("handleClose");
      this.$refs.form.clearValidate();
    },
    changeSure() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.title == "add") {
            const list = {
              username: this.formData.username,
              password: this.formData.password,
            };
            userAddlData(list)
              .then((res) => {
                const { code, msg } = res.data;
                if (code == 200) {
                  this.dialogVisible = false;
                  this.$message.success(msg);
                } else {
                  this.$message.error(msg);
                }
              })
              .catch((err) => {
                this.$message.error(err);
              });
          } else {
            const list = {
              id: this.formData.id,
              username: this.formData.username,
              password: this.formData.password,
            };
            userEditlData(list)
              .then((res) => {
                const { code, msg } = res.data;
                if (code == 200) {
                  this.dialogVisible = false;
                  this.$message.success(msg);
                } else {
                  this.$message.error(msg);
                }
              })
              .catch((err) => {
                this.$message.error(err);
              });
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
:deep(.el-dialog__footer) {
  text-align: center;
}
</style>
